/*
 * @Author: mikey.zhaopeng
 * @Date:   2016-05-25 10:54:13
 * @Last Modified by:   mikey.zhaopeng
 * @Last Modified time: 2016-06-04 16:49:35
 */

'use strict';;
(function($, window, document, undefined) {
    'use strict';
    var Jstep = function(element, options) {
        var self = this;
        self.$element = $(element);
        self.config = $.extend(true, {}, $.fn.jstep.defaults, element.data(), options);

        function build() {
            self.$element.empty();
            self.$element.addClass('ui-jstep-container');
            var tpl = '<ul class="ui-jstep">';
            for (var i = 0; i < 11; i++) { // 11 个进行分割,类似栅栏分割
                tpl = tpl + '<li class="ui-jstep-md-1" data-md="' + i + '"><div class="ui-jstep-line"></div></li>';
            }
            tpl = tpl + '</ul>';
            self.$element.append(tpl);
            self.$element.find('.ui-jstep-md-1[data-md="0"]').empty();
            self.$element.find('.ui-jstep-md-1[data-md="1"]').empty();
            self.$element.find('.ui-jstep-md-1[data-md="2"]').html('<div class="ui-jstep-step" data-step="1"> <div class="ui-jstep-step-tip">1</div> <div class="ui-jstep-step-title"> ' + self.config.data[0] + '</div> </div>');
            self.$element.find('.ui-jstep-md-1[data-md="5"]').html('<div class="ui-jstep-step" data-step="2"> <div class="ui-jstep-step-tip">2</div> <div class="ui-jstep-step-title">' + self.config.data[1] + '</div> </div>');
            self.$element.find('.ui-jstep-md-1[data-md="8"]').html('<div class="ui-jstep-step" data-step="3"> <div class="ui-jstep-step-tip">3</div> <div class="ui-jstep-step-title"> ' + self.config.data[2] + '</div> </div>');
            self.$element.find('.ui-jstep-md-1[data-md="9"]').empty();
            self.$element.find('.ui-jstep-md-1[data-md="10"]').empty();
            //✓

            var $tipArr = self.$element.find('.ui-jstep-step-tip');

            for (var i = 0; i < self.config.start; i++) {
                var $tip = $($tipArr[i]);
                $tip.addClass('done');
                $tip.html('✓');
            }
        }

        function destory() {
            $(element).empty();
        }

        this.startup = function() {
            build();
        }
    }

    /***
     ** 入口
     **/
    $.fn.jstep = function(options) {
        var the = this.first();
        var jstep = new Jstep(the, options);
        jstep.startup();
        return the;
    }

    /***
     ** outside accessible default setting
     **/
    $.fn.jstep.defaults = {
        data: [], //step 节点数组
        start: 1 //开始节点，默认0
    };
}(jQuery, window, document));
